<!--
 * @Author: yehongbo 1394168736@qq.com
 * @Date: 2024-02-29 11:13:58
 * @LastEditors: yehongbo 1394168736@qq.com
 * @LastEditTime: 2024-02-29 15:49:14
 * @FilePath: \giteeDownload\testthree\src\views\test20.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名">
      </el-table-column>
      <el-table-column prop="amount1" sortable label="数值 1">
        <template slot-scope="scope">
          <el-date-picker v-model="scope.row.amount1"></el-date-picker>
        </template>
      </el-table-column>
      <el-table-column prop="amount2" sortable label="数值 2">
      </el-table-column>
      <el-table-column prop="amount3" sortable label="数值 3">
      </el-table-column>
    </el-table>
    <el-button @click='addItem'>add</el-button>
    {{ tableData }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: []
    };
  },
  methods: {
    addItem() {
      this.tableData.push({
        id: '12987122',
        name: '',
        amount1: '',
        amount2: '3.2',
        amount3: 10
      })
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
};
</script>